<template>
  <div id="tel">
    <group class="tel">
      <!-- <group-title slot="title" class="group-title"><span>{{label}}</span><span class="required"
                                                                                v-show="item.required">*</span>
      </group-title> -->
      <x-input :is-type="checkMobile" type="tel" mask="999 9999 9999" :placeholder="description||label" placeholder-align="right" text-align="right" v-model='formData'>
        <template slot="label">
          <!-- use scope="props" when vue < 2.5.0 -->
          <div style="display:inline-block" class='vux-cell-box tellabel'>
            <div style="padding-right=0;width: 8em;padding-right: 0;" class="weui-cell vux-tap-active weui-cell_access">
              <div style="font-size:0" v-if='!!item.required' class="weui-cell__hd">
                <span style="font-size:17px">{{label}}
                  <span style="color:red;font-size:17px">*</span>
                </span>
              </div>
              <div style="font-size:0" v-if='!item.required' class="weui-cell__hd">
                <span style="font-size:17px">{{label}}</span>
              </div>

            </div>
          </div>

          <popup-picker class='telcode' title="" v-model="telCode" :data="list" @on-change="onChange"></popup-picker>
        </template>
      </x-input>
    </group>
  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
import { Selector, Group, Cell, XInput, GroupTitle, PopupPicker } from "vux";

export default {
  props: {
    code: {},
    mobile: {},
    item: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      list: [
        [
          "+1",
          "+7",
          "+20",
          "+27",
          "+30",
          "+31",
          "+32",
          "+33",
          "+34",
          "+36",
          "+39",
          "+40",
          "+43",
          "+44",
          "+45",
          "+46",
          "+47",
          "+48",
          "+49",
          "+51",
          "+52",
          "+53",
          "+54",
          "+55",
          "+56",
          "+57",
          "+58",
          "+60",
          "+61",
          "+62",
          "+63",
          "+64",
          "+65",
          "+66",
          "+81",
          "+82",
          "+84",
          "+86",
          "+90",
          "+91",
          "+92",
          "+93",
          "+94",
          "+95",
          "+98",
          "+212",
          "+213",
          "+216",
          "+218",
          "+220",
          "+221",
          "+223",
          "+224",
          "+225",
          "+226",
          "+227",
          "+228",
          "+229",
          "+230",
          "+231",
          "+232",
          "+233",
          "+234",
          "+235",
          "+236",
          "+237",
          "+239",
          "+241",
          "+242",
          "+243",
          "+244",
          "+247",
          "+248",
          "+249",
          "+251",
          "+252",
          "+253",
          "+254",
          "+255",
          "+256",
          "+257",
          "+258",
          "+260",
          "+261",
          "+262",
          "+263",
          "+264",
          "+265",
          "+266",
          "+267",
          "+268",
          "+327",
          "+331",
          "+350",
          "+351",
          "+352",
          "+353",
          "+354",
          "+355",
          "+356",
          "+357",
          "+358",
          "+359",
          "+370",
          "+371",
          "+372",
          "+373",
          "+374",
          "+375",
          "+376",
          "+377",
          "+378",
          "+380",
          "+381",
          "+386",
          "+420",
          "+421",
          "+423",
          "+501",
          "+502",
          "+503",
          "+504",
          "+505",
          "+506",
          "+507",
          "+509",
          "+591",
          "+592",
          "+593",
          "+594",
          "+595",
          "+596",
          "+597",
          "+598",
          "+599",
          "+673",
          "+674",
          "+675",
          "+676",
          "+677",
          "+679",
          "+682",
          "+684",
          "+685",
          "+689",
          "+850",
          "+852",
          "+853",
          "+855",
          "+856",
          "+880",
          "+886",
          "+960",
          "+961",
          "+962",
          "+963",
          "+964",
          "+965",
          "+966",
          "+967",
          "+968",
          "+971",
          "+972",
          "+973",
          "+974",
          "+976",
          "+977",
          "+992",
          "+993",
          "+994",
          "+995",
          "+1242",
          "+1246",
          "+1264",
          "+1268",
          "+1345",
          "+1441",
          "+1664",
          "+1670",
          "+1671",
          "+1758",
          "+1784",
          "+1787",
          "+1809",
          "+1876",
          "+1890"
        ]
      ],
      telCode: ["+86"],
      formData: ""
    };
  },
  created() {
    //console.log('code'+this.code)
    this.label = this.item.label;
    this.placeholder = this.item.placeholder;
    this.description = this.item.description;
    this.required = this.item.required;
    this.telCode = this.item.area || ["+86"];
    //console.log('-+-+')
    this.formData = this.item.tel;
    //console.log(this.item.area[0])
    //console.log(this.item.area)
    if(!!this.item.area){
          if (this.item.area.lenght != 0) {
      if (this.item.area[0].indexOf("+") == -1) {
        this.telCode[0] = this.code;
        this.formData = this.mobile;
      }
    }
    }


    // if(this.telCode.length<=5){

    // }
  },
  mounted() {},
  methods: {
    onChange() {
      //console.log(this.formData)
      this.formData += " ";
    },
    popTel() {
      this.$emit("tel", {
        tel: str,
        index: this.index,
        telCode: this.telCode[0]
      });
    },
    checkMobile: function(str) {
      // console.log(this.index)
      // console.log(this.formData)
      // console.log(this.telCode)
      this.$emit("tel", {
        tel: str,
        index: this.index,
        telCode: this.telCode[0]
      });

      if (this.telCode[0] === "+86") {
        //去除空格
        str = str.replace(/\s+/g, "");
        return {
          valid: /^1[1234567890]\d{9}$/.test(str),
          msg: "请填写符合规则的手机号码"
        };
      } else {
        return {
          valid: true
        };
      }
    }
  },
  components: {
    Selector,
    Cell,
    Group,
    XInput,
    GroupTitle,
    PopupPicker
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#tel .tel .vux-x-input {
  padding: 0;
}

#tel .tel .weui-select {
  width: 105px;
  box-sizing: border-box;
}

#tel .tel .weui-cell__primary {
  padding-left: 15px;
  padding-right: 15px;
}

#tel .tel .weui-cell__hd:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #e5e5e5;
  color: #e5e5e5;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

#form .tel .vux-cell-box,
#form .tel .vux-cell {
  display: flex;
}

// #form .tel .weui-cell.vux-tap-active{
//   display: inline-block;
// }

#form .tel .vux-popup-picker-value + .vux-popup-picker-value {
  color: red;
}

#form .tel .weui-cell__hd {
  display: flex;
}

#form .tel .weui-cell__ft {
  position: relative;
  left: -15px;
}
</style>

